<template>
  <div class="container">
    <el-form :inline="true" :model="formInline" class="grids gridColumns5">
      <el-form-item label="授课状态">
        <el-select @change="onSubmit" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" v-model="formInline.teachingStatus" placeholder="授课状态" clearable>
          <el-option label="专职" value="2" />
          <el-option label="兼职" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="授课项目">
        <courseQuery v-model="formInline.teachingProgramId"></courseQuery>
      </el-form-item>
      <el-form-item label="课时">
        <el-input v-model.number="formInline.classHour" placeholder="课时" clearable type="number" />
      </el-form-item>
      <el-form-item label="讲师姓名">
        <el-input v-model="formInline.lecturerName" placeholder="讲师姓名" clearable />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="formInline.mobile" placeholder="联系电话" clearable />
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="formInline.idCard" placeholder="证件号码" clearable />
      </el-form-item>
      <el-form-item label="教师资格证书">
        <el-input v-model="formInline.teacherQualificationCertificate" placeholder="教师资格证书" clearable />
      </el-form-item>
      <el-form-item label="合同起止日期">
        <datePickerRange v-model:start="formInline.contractStartTime" v-model:end="formInline.contractEndTime">
        </datePickerRange>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="actionBtn">
      <el-button type="primary" @click="proxy.$refs.lecturerEditRef.open()">新增讲师</el-button>
      <el-button @click="init">导出</el-button>
      <el-button @click="batchDel" type="danger" :disabled="selectRows.length==0">删除</el-button>
    </div>

    <el-table :data="tableData.rows" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column label="授课状态" fixed="left">
        <template #default="scope">
          <div v-if="scope.row.teachingStatus == '2'" style="color: #0F40F5;">专职</div>
          <div v-else-if="scope.row.teachingStatus == '1'" style="color: #4196A2;">兼职</div>
          <div v-else style="color: #EA2310;">停用</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="授课项目" min-width="400" show-overflow-tooltip>
        <template #default="scope">
          <courseQuery v-model="scope.row.teachingProgramId" readonly="1"></courseQuery>
        </template>
      </el-table-column>
      <el-table-column prop="classHour" label="课时" />
      <el-table-column label="讲师姓名" width="100">
        <template #default="scope">
          <div class="lecturerName" @click="proxy.$utils.toLink(`/classManage/archivesDetails?id=${scope.row._id}`)">{{scope.row.teacher_info.lecturerName}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="teacher_info.mobile" label="联系电话" min-width="150" />
      <el-table-column prop="teacher_info.remarks" label="备注" width="200" show-overflow-tooltip />
      <el-table-column prop="idCard" label="证件号码" width="170" />
      <el-table-column width="180" prop="teacherQualificationCertificate" label="教师资格证" />
      <el-table-column width="200" label="合同起止日期">
        <template #default="scope">
          {{scope.row.contractStartTime}} ~ {{scope.row.contractEndTime}}
        </template>
      </el-table-column>
      <el-table-column label="带班期数" fixed="right" width="80" align="center">
        <template #default="scope">
          {{(scope.row.bindClassIds && scope.row.bindClassIds.length)||0}}
        </template>
      </el-table-column>
      <el-table-column width="100" label="操作" fixed="right" align="center">
        <template #default="scope">
          <div class="button" @click="proxy.$refs.lecturerEditRef.open(scope.row)">编辑</div>
        </template>
      </el-table-column>
    </el-table>

    <Pagination :selectNum="selectRows.length" v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageIndex" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <lecturerEdit ref="lecturerEditRef" @fatherMethods="getInfo"></lecturerEdit>
  </div>
</template>

<script setup lang="ts">
import lecturerEdit from "@/views/courseManage/components/lecturerEdit.vue";
const { proxy } = getCurrentInstance();
let tableData = ref({});
let formInline = ref({
  teachingStatus: "",
  teachingProgramId: "",
  classHour: "",
  lecturerName: "",
  mobile: "",
  idCard: "",
  teacherQualificationCertificate: "", //教师资格证书
  contractStartTime: "",
  contractEndTime: "",
  pageIndex: 1,
  pageSize: 50,
});
let selectRows = ref([]);

onMounted(() => {
  getInfo();
});

function init() {
  formInline.value = {
    teachingStatus: "",
    teachingProgramId: "",
    classHour: "",
    lecturerName: "",
    mobile: "",
    idCard: "",
    teacherQualificationCertificate: "", //教师资格证书
    contractStartTime: "",
    contractEndTime: "",
    pageIndex: 1,
    pageSize: 50,
  };
  getInfo();
}

function onSubmit() {
  formInline.value.pageIndex = 1;
  getInfo();
}

async function getInfo() {
  tableData.value = await proxy.$apis.teachingArchives({
    type: "list",
    data: formInline.value,
  });
}

async function batchDel() {
  let resp = await proxy.$utils.confirmTips("确认删除所选数据？");
  if (!resp) return;
  for (let index = 0; index < selectRows.value.length; index++) {
    const element = selectRows.value[index];
    await proxy.$apis.teachingArchives({
      type: "del",
      data: { _id: element._id },
    });
  }
  proxy.$utils.showToast("删除成功");
  getInfo();
}

function handleSelectionChange(e) {
  selectRows.value = e;
}

watch(
  () => [
    formInline.value.teachingStatus,
    formInline.value.teachingProgramId,
    formInline.value.classHour,
    formInline.value.lecturerName,
    formInline.value.mobile,
    formInline.value.idCard,
    formInline.value.teacherQualificationCertificate,
    formInline.value.contractStartTime,
    formInline.value.contractEndTime,
  ],
  (newValue, oldValue) => {
    if (newValue) onSubmit();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
  .actionBtn {
    margin-bottom: 15px;
  }
  .lecturerName {
    color: #c95c19;
    cursor: pointer;
  }
}
</style>

